<template>
	<view class="">
		<view class="form-content">
			<view class="addEmployee-item">
				<view class="">
					姓名
				</view>
				<view class="">
					<input type="text" v-model="employeeName" placeholder="请输入" />
				</view>
			</view>
			<view class="addEmployee-item">
				<view class="">
					手机号
				</view>
				<view class="">
					<input type="tel" v-model="employeeTel" placeholder="请输入" />
				</view>
			</view>
			<view class="addEmployee-item addEmployee-item-last">
				<view class="">
					职位
				</view>
				<view class="" @click="openBotPop">
					<template v-if="postName">{{postName}}</template>
					<template v-else>
						<text style="font-size: 12px;">请选择</text>
						<image class="addEmployee-item-img" src="../../../../static/rightArrow81.png" mode=""></image>
					</template>
				</view>
			</view>
		</view>

		<view v-if="!isEdite" class="addEmployee-btn">
			<button type="primary" @click="confirm" style="background-color: #007aff;">确认提交</button>
		</view>
		<view v-if="isEdite" class="addEmployee-btn1">
			<button type="warn" @click="deleteHandler" style="background-color: red;">删除</button>
			<button type="primary" @click="confirm" style="background-color: #007aff;">确认提交</button>
		</view>
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-title">
					选择职位
				</view>
				<view class="popup-item-text" :class="{'popup-item-text-active':popActive==`${index}`?true:false}"
					@click="selectHandler(index,item)" :key="index" v-for="(item,index) in positionData">
					{{item.name}}
				</view>
				<view class="popup-item-btn" @click="popConfirm">
					<button type="primary" style="background-color: #007aff;">确定</button>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		addCompanyStaff,
		getPosition,
		deleteEmployerr
	} from "@/api/user.js"
	export default {
		data() {
			return {
				isEdite: false,
				positionId: '',
				employeeName: '',
				employeeTel: "",
				popActive: 0,
				postNameOld: "",
				postName: "",
				positionData: [],
				deletId: ''
			}
		},
		methods: {
			deleteHandler: function() {
				const that=this
				uni.showModal({
					title: "是否删除当前员工?",
					cancelText: "否",
					confirmText: "是",
					success() {
						deleteEmployerr(that.deletId).then(res => {
							uni.showToast({
								title: "删除成功"
							})
							uni.navigateBack()
						})
					}
				})

			},
			openBotPop: function() {
				this.$refs.popup.open("bottom")
			},
			selectHandler: function(num, data) {
				this.postNameOld = data.name;
				this.popActive = num;
				this.positionId = data.id
			},
			popConfirm: function() {
				this.postName = this.postNameOld;
				this.$refs.popup.close()
			},
			getPositionData: function() {
				getPosition().then(res => {
					this.positionData = res.data
				})
			},
			confirm: function() {
				var reg = /^1\d{10}$/;
				if (!this.employeeName.trim()) {
					uni.showToast({
						title: "请输入姓名"
					})
					return
				}
				if (!this.employeeTel.trim()) {
					uni.showToast({
						title: "请输入手机号"
					})
					return
				} else if (!reg.test(this.employeeTel)) {
					uni.showToast({
						title: "手机号格式不正确"
					})
					return
				}

				if (!this.postName) {
					uni.showToast({
						title: "请选择职位"
					})
					return
				}
				const userData = uni.getStorageSync("login")
				if (userData) {
					addCompanyStaff({
						id: "",
						company_id: userData.company_auth.id,
						mobile: this.employeeTel,
						name: this.employeeName,
						position: this.positionId
					}).then(res => {
						uni.showToast({
							title: "添加成功"
						})
						this.employeeName = "";
						this.employeeTel = "";
						this.postName = this.postName
						uni.navigateBack()
					})
				}

			}
		},
		onShow() {

			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#2D56C5',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
			this.getPositionData()
		},
		onLoad(option) {
			console.log("option===", option);
			const data = JSON.parse(option.data)
			if (data) {
				this.isEdite = true
				this.employeeName = data.name
				this.employeeTel = data.mobile
				this.postName = data.position
				this.positionData.forEach((item, index) => {
					if (item.name == data.mobile) {
						this.popActive = index
					}
				})
				this.deletId = data.id
			} else {
				uni.setNavigationBarTitle({
					title: "编辑员工"
				})
				this.isEdite = false
				this.popActive = 0
				this.deletId = ''
			}

		}
	}
</script>

<style scoped lang="scss">
	.form-content {
		margin-top: 10px;
		background-color: #fff;
	}

	.addEmployee-item {
		display: flex;
		justify-content: space-between;
		padding: 10px 0px;
		margin: 0 10px;
		border-bottom: 1px solid #ddd;

		input {
			text-align: right;
		}

		&-img {
			width: 10px;
			height: 10px;
			margin-left: 5px;
		}

		&-last {
			border: none;
		}
	}

	.addEmployee-btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		box-shadow: 0rpx -4rpx 6rpx 0rpx rgba(230, 230, 230, 0.75);
		background-color: #fff;
		height: 80px;
		display: flex;
		align-items: center;

		button {
			width: 80%;
		}
	}

	.popup-title {
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		padding: 20px 0;
	}

	.popup-item-text {
		font-size: 14px;
		padding: 10px;
		border-bottom: 1px solid #eee;

		&-active {
			color: #2D56C5;
		}
	}

	.popup-item-btn {
		display: flex;
		justify-content: space-between;
		padding: 20px 0;

		button {
			width: 40%;
		}
	}

	.uni-input-placeholder {
		font-size: 12px !important;
	}

	.addEmployee-btn1 {
		position: fixed;
		bottom: 0;
		width: 100%;
		box-shadow: 0rpx -4rpx 6rpx 0rpx rgba(230, 230, 230, 0.75);
		background-color: #fff;
		height: 80px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		button {
			width: 40%;
		}
	}
</style>